<template>
  <img :src="url" alt="avatar" :style="style">
</template>

<script>
export default {
  props: {
    size: {
      default: 32,
      type: [Number, String]
    },
    url: {
      required: true,
      type: String
    }
  },
  computed: {
    style () {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        borderRadius: '100%'
      }
    }
  }
}
</script>

<style>

</style>